import { useState, useEffect } from "react";
import { Select, message } from "antd";
import { getProcessGroup } from '../../server';

export default function ProcessGroups(props: any) {
    const { value, onChange, clearAble } = props;
    const [data, setData] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);

    const getComps = async () => {
        setLoading(true);
        try {
            let results = await getProcessGroup();
            if (results?.details && results?.details?.rows?.length > 0) {
                const data = results?.details?.rows?.map((item: { groupName: any; groupId: any; }) => {
                    return {
                        label: item?.groupName,
                        value: item?.groupId,
                    }
                })
                setData(data);
            };
            setLoading(false);
        } catch (error: any) {
            message.error(error);
            setLoading(false);
        };
    };

    useEffect(() => {
        getComps();
    }, []);

    const onSelectChange = (value: string[]) => {
        onChange(value)
    };

    return (
        <Select
            value={loading ? '' : value}
            onChange={onSelectChange}
            options={data}
            showArrow
            loading={loading}
            allowClear={clearAble === false ? false : true}
            getPopupContainer={() => document.body}
        />
    )
};